<template lang="pug">
    div.top
        //异步加载轮播图的情况
        Swiper(v-if="list.length > 0").banner-box
            Slide(v-for="(item,index) in list" :key="index").slide
                img(:src="item.url")
        //搜索框
        div.search-box
            div.search-icon
            input(placeholder="请输入").search-text
            div.clear-icon
</template>

<script>
// import { Swiper, Slide } from "vue-swiper-component";
//轮播图背景
import banner_1 from "../../../../public/img/home/banner/banner_1.jpg";
import banner_2 from "../../../../public/img/home/banner/banner_2.jpg";
import banner_3 from "../../../../public/img/home/banner/banner_3.jpg";
import banner_4 from "../../../../public/img/home/banner/banner_4.jpg";
import banner_5 from "../../../../public/img/home/banner/banner_5.jpg";

export default {
  name: "top",
  // components: {
  //   Swiper,
  //   Slide
  // },
  data() {
    return {
      list: [
        { url: banner_1 },
        { url: banner_2 },
        { url: banner_3 },
        { url: banner_4 },
        { url: banner_5 }
      ]
    };
  }
};
</script>

<style scoped lang="stylus">
    .top
        position relative
        text-align left
        .banner-box
            .slide
                img
                    width 100%
                    height: 5rem
        .search-box
            background-color rgba(200,200,200,0.2)
            border-radius 0.2rem
            display flex
            align-items center
            position: absolute
            top 0.15rem
            left 0
            right 0
            margin auto
            z-index 1
            width 90%
            .search-icon,.clear-icon
                display: inline-block
                width 0.6rem
                height 0.6rem
                background url("../../../assets/icon/home/top/search.png") no-repeat
                background-size contain
                margin-left 0.15rem
            .search-text
                outline none
                border none
                background-color transparent
                height 0.6rem
                padding 0.1rem
                width 80%
                color: white
            .clear-icon
                background url("../../../assets/icon/home/top/clear-icon.png") no-repeat
                background-size contain
                width 0.4rem
                height 0.4rem
                margin-left 0.2rem
</style>
